The browsers your client chooses to support affect how much time you put into the "early browser issue." In our opinion, it is a "best practice" to support early browser users and make sure they still have complete access to the same content. Although not all your styling will be supported in the granddaddy browsers, your page should degrade gracefully though it may not be as attractive.

Netscape 4 and Microsoft Internet Explorer (IE) 3, and later, support CSS; however, neither supports CSS consistently. The newer browsers (version 5 and up of both Netscape and IE) have worked hard to move toward the W3C standards. Though they still have their quirks, their CSS support is much more consistent. Check out the Master Compatibility Chart, listing browser support for various CSS styles, on WebReview.com. As you learn these techniques and become more advanced, make sure you reference these charts and test your site in a variety of browsers.

There are several ways to play hide and seek with Netscape 4–series browsers:

MaKo has a good reference on her CSS Know-How Site which explains how to create a second style sheet to get around Netscape 4's issues. It's really just a matter of removing certain properties in your definitions that can choke Netscape 4—such as line-height, letter-spacing, and borders, to name a few. You can study this issue more in the article, "CSS and Netscape 4.xx Issues." Generally, if you keep an eye on Netscape 4 browsers, IE3 and earlier browsers will be fine as well.

Create an alternate style sheet to mollify the early browsers. Right-click (Control-click for Mac) master.css in your Site window. Choose Duplicate from the pop-up menu. Now right-click the copy in your Site window and choose Rename. Name the copy masternn4.css.

If you're using Dreamweaver MX, you can now open both master.css and masternn4.css by double-clicking them. Otherwise, use a text or CSS editor. Place both windows side by side; you'll be working with both of them. If you don't have a large monitor, put the older-browser CSS on the left, put the newer-browser CSS on the right, and hide your panels (Window > Hide Panels).

Remember when we discussed font hierarchy? Browsers read style sheets in the same way: top to bottom (hence the name "cascade"). If you link masternn4.css first and then import master.css next, newer browsers will read the older browser CSS page (masternn4.css) and then continue on to the newer browser CSS page (master.css). Older browsers will read the older browser CSS page and then ignore the newer browser CSS page (which contains the more "difficult" styling) because they won't recognize the @import method, shown later in the code. So everybody's happy.

In essence, you're removing from masternn4.css anything that can choke the early browsers; whereas from master.css you're removing anything that is redundant. Because newer browsers will have already read masternn4.css, it's a "best practice" to remove the duplication to slim your code.

Let's get started. We'll walk you through the first few changes. Then, because of lack of space, we'll give you instructions so you can do the rest on your own. (Heck, how else will you learn it?) You can always check the completed pages (download link at the beginning of the tutorial) to compare your work.

Begin with the body ID at the top of your style sheets. You haven't used any styles that give Netscape problems so you can remove that ID from master.css; just highlight the entire selector and delete it. Remember, you're leaving anything that Netscape "likes" in the older browser style sheet and only placing the styles that choke it in master.css.

The #content ID is also not a problem, so remove it from master.css. Now you need to edit #content h1, which contains properties that will trigger Netscape 4's gag reflex. Netscape 4 can't handle either letter spacing or font sizes written in percentages. Go ahead and delete the letter-spacing property from the masternn4.css sheet. For the font-size property, change 120% to 20 pixels. Now move over to the master.css sheet. Leave the font-size property as 120%; because of the cascade order of the sheets, the percentage sizing will override the pixel sizing you just placed in the older browser sheet. Remove the font-family, font-weight, color, and background-color properties from #content because they're redundant. This leaves you only with the font-size and letter-spacing properties.

The #content h2 ID also contains letter-spacing and font-size as a percentage, so complete the same procedure you followed above. The only difference is that because this is a smaller header (h2) you want to use a smaller size: 14 pixels. Continue by following the same steps for #content p; this time remove the line-height property in the older browser sheet and change the font-size to 11 pixels.

For the next few IDs, remove the following properties listed next to the selectors below in the masternn4.css page (again, following the same procedure as above). Just remember to remove completely whatever properties you saved in masternn4.css from master.css:

Save and close both your style sheets. You already have the original style sheet linked to your page (master.css). Because that is the style sheet you'll be using for the newer browsers, change that and link masternn4.css instead. If you're using Dreamweaver MX, this is simple. Select Window > Show Panels (if you previously set them to Hide), open index.html, and don't panic when you look at it. It will have lost most of its styling briefly because all it can "see" right now is the little bit of styling left in master.css.

To avoid confusion, go into Code view and then highlight and delete your current style sheet link: {<link href="master.css" rel="stylesheet" type="text/css" />}. Click the leftmost icon at the bottom of the CSS Styles panel (it looks like a page). In the Link External Style Sheet dialog box, make sure the Link option is selected. Click Browse to navigate to masternn4.css; select it and click OK. Now click the same icon again but, this time, make sure the Import option is checked. Navigate to master.css, select it, and click OK. Your page should be back to normal.

If you're using an earlier version of Dreamweaver you'll need to put this into your code by hand:

<link href="masternn4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("master.css");
-->
</style>

The last thing you need to do is select Commands > Add/Remove Netscape Resize Fix. Click the Add button in the dialog box. This adds a small piece of JavaScript to the head of your document that works around a bug in some versions of Netscape. (The bug causes the page to appear incorrectly when the user resizes the browser window.)

Make sure all your pages are saved. If you're ready to view online the page you've just created, upload the files to your server, including both CSS pages. Otherwise, select File > Preview in Browser (or press F12) and select the browsers you'd like to view it in.